<template>
  <div class="haed">
    <div class="left">
      <i :class="$store.state.expand.mauncollapse?'el-icon-s-fold':'el-icon-s-unfold'"
         style="cursor: pointer" @click="TOGGLE"></i>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/meter' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="expand in $store.state.expand.names" :key="expand">
          {{ expand }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-dropdown>
      <div class="haea2">
        <el-avatar class="avatar" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <span>{{$store.state.loding.LOGINTO}}</span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>个人中心</el-dropdown-item>
        <el-dropdown-item>
          <span @click="quit">
             退出登录
          </span>
         </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'headto',
  // 头部组件
  methods: {
    TOGGLE() {
      //点击切换侧边栏展开或者关闭
      this.$store.commit('TOGGLE')
    },
    quit(){
      this.$store.commit('LOGINTO')
      this.$router.go(0)
  },
},
  watch:{
    // 面包屑首页返回
    $route(to) {
      if (to.path === '/meter') {
        this.$store.commit('CLEARBRWAD')
      }
    }
  }
}

</script>

<style lang="scss" scoped>

.haed {
  display: flex;
  justify-content: space-between;

}

.el-icon-s-unfold {
  margin-top: 16px;
  font-size: 28px;
}

.haea2 {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
  cursor:pointer;
}

.left {
  display: flex;
  justify-content: flex-end;

  .el-breadcrumb {
    margin-top: 22px;
    margin-left: 20px;
  }
}

.el-icon-s-fold {
  margin-top: 16px;
  font-size: 28px;
}
</style>
